﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<section id="download-bootstrap">
    <div class="page-header">
        <h3>Bop Button Examples</h3>
    </div>

    <article>
        <h4 class="lead">Button</h4>
        <p>You can use following code to generate a simple Button element on you page as you can see in right hand side.</p>

        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/ButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/Button.cshtml")
            </div>
        </div>
    </article>

    <article>
        <h4 class="lead">Skin Button</h4>
        <p>You can use <strong>Skin</strong> Method to set a skin for your button. Bootstrap presents 8 different skins <strong>Defaut, Danger, Info, Success, Warning, Inverse, Link and Primary</strong>. If you do not set a skin the Default Skin will be used automatically.</p>

        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/SkinButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/SkinButton.cshtml")
            </div>
        </div>
    </article>

    <article>
        <h4 class="lead">Skin Button</h4>
        <p><strong>Icon</strong> Method lets you to se an icon for your button. Bootstrap prepare large number of icons and you can use them. for more info please have look at <a href="http://twitter.github.com/bootstrap/base-css.html#icons">here</a>.</p> 
        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/IconButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/IconButton.cshtml")
            </div>
        </div>
    </article>

    <article>
        <h4 class="lead">Button Client Events</h4>
        <p>You can fire client events by your button by using ClientEvent method </p> 
        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/ClientEventButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/ClientEventButton.cshtml")
            </div>
        </div>
    </article>


     <article>
        <h4 class="lead">Button Size</h4>
        <p>You can set button's size.</p> 
        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/SizeButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/SizeButton.cshtml")
            </div>
        </div>
    </article>


     <article>
        <h4 class="lead">Button Group</h4>
        <p>You can group buttons into groups.</p> 
        <div class="row-fluid">
            <div class="span6">
                <h5>Source Code</h5>
                @RenderPage("Examples/GroupButtonCode.cshtml")
            </div>

            <div class="span6">
                <h5>Component</h5>
                @RenderPage("Examples/GroupButton.cshtml")
            </div>
        </div>
    </article>
</section>










